<template>
    <div class="cvdCls">
        <vc-viewer ref="viewerRef" @ready="onViewerReady" :showCredit="false" :sceneModePicker="true"
            :fullscreenButton="true" :infoBox="false" :sceneMode="sceneMode">
            <!-- 导航工具 -->
            <vc-navigation-sm @compass-evt="onNavigationEvt" ref="navigation" :compass-opts="{ autoHidden: false }"
                position="top-right" :zoom-opts="false" :offset="[0,130]"></vc-navigation-sm>
            <VcZoomControl position="top-right" border-radius="0" :offset="[40, 350]"></VcZoomControl>
            <!-- 注记图层 -->
            <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="20">
                <vc-imagery-provider-tianditu :map-style="msBz"
                    :token="token"></vc-imagery-provider-tianditu>
            </vc-layer-imagery>
            <!-- 底图 -->
            <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="10">
                <vc-imagery-provider-tianditu :map-style="msDt"
                    :token="token"></vc-imagery-provider-tianditu>
            </vc-layer-imagery>
            <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="30">
                <vc-imagery-provider-tianditu :map-style="msBj"
                    :token="token"></vc-imagery-provider-tianditu>
            </vc-layer-imagery>
            <!-- 以下写法无需单独引用 -->
            <!-- 定位组件 -->
            <VcMyLocation position="bottom-right" :offset="[0,40]"></VcMyLocation>
            <!-- 渲染3dtiles组件 -->
            <VcPrimitiveTileset url="http://112.4.237.162:78/3dtile/localMap/tileset.json" @ready="onReady"
                @click="onClicked" @all-tiles-loaded="allTilesLoaded" v-if="show3dTiles"></VcPrimitiveTileset>
            <!-- 标绘组件 -->
            <VcDrawings :editable="true" ref="drawingsRef" position="bottom-left" :main-fab-opts="mainFabOpts"
                :offset="[205, 25]" @draw-evt="drawEvt" @active-evt="activeEvt" @editor-evt="editorEvt"
                @mouse-evt="mouseEvt" @clear-evt="clearEvt" @ready="drawingsReadyDefault"></VcDrawings>
            <!-- 测量组件 -->
            <VcMeasurements @ready="measurementsReady" position="bottom-left" :offset="[205, 85]"
                :main-fab-opts="measureFabOpts"></VcMeasurements>
            <VcAnalyses @ready="analysesReady" position="bottom-left" :offset="[205, 145]"
                :main-fab-opts="analyseFabOpts" @draw-evt="analyseDrawEvt" @active-evt="analyseActiveEvt">
            </VcAnalyses>
            <!-- 以上写法无需单独引用 -->
        </vc-viewer>
        <!-- 图层控制工具条 -->
        <div class="toolsDiv">
            <span class="demonstration">透明度</span>
            <el-slider v-model="alpha" :min="0" :max="1" :step="0.01"></el-slider>
            <span class="demonstration">亮度</span>
            <el-slider v-model="brightness" :min="0" :max="5" :step="0.01"></el-slider>
            <span class="demonstration">对比度</span>
            <el-slider v-model="contrast" :min="0" :max="5" :step="0.01"></el-slider>
            <span class="demonstration">切换风格</span>
            <el-select v-model="msDt" placeholder="请选择" @change="dtChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-switch v-model="show3dTiles" inline-prompt active-text="渲染3d Tiles" inactive-text="隐藏3d Tiles"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                @change="showOrHidden"></el-switch>
        </div>
    </div>
</template>

<script setup lang='ts'>
 
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { VcViewer,VcNavigationSm,VcLayerImagery,VcImageryProviderTianditu } from 'vue-cesium'
import type { VcReadyObject } from 'vue-cesium/es/utils/types'
const token = ref(conf.tdtToken)
const viewerRef = ref<HTMLElement>(null)
const navigation = ref(null)
const onViewerReady = (readyObj: VcReadyObject) => {
    console.log(readyObj.Cesium) // Cesium namespace object
    console.log(readyObj.viewer) // instanceof Cesium.Viewer
}
const onNavigationEvt = (e)=>{
    console.log(e)
}
// 1：哥伦布视图，2：二维地图 3:3D地图
const sceneMode = ref(3)
// 底图选择切换相关
const alpha = ref(1)
const brightness = ref(1)
const contrast = ref(1)
const options = [
    {
        value: 'img_c',
        valueZj: 'cia_c',
        label: '全球影像地图服务(经纬度)'
    },
    {
        value: 'img_w',
        valueZj: 'cia_w',
        label: '全球影像地图服务(墨卡托)'
    },
    {
        value: 'vec_c',
        valueZj: 'cva_c',
        label: '全球矢量地图服务(经纬度)'
    },
    {
        value: 'vec_w',
        valueZj: 'cva_w',
        label: '全球矢量地图服务(墨卡托)'
    },
    {
        value: 'ter_c',
        valueZj: 'cta_c',
        label: '全球地形晕渲服务(经纬度)'
    },
    {
        value: 'ter_w',
        valueZj: 'cta_w',
        label: '全球地形晕渲服务(墨卡托)'
    }
]
let msBz = ref('cia_c')
let msDt = ref('img_c')
let msBj = ref('ibo_c')
const dtChange = (val)=>{
    console.log('当前选择地图类型：', val);
    if (val) {
        msBz = options.find(item => item.value === val).valueZj;
    }
    msBj = val.indexOf('_c') >-1?'ibo_c': 'ibo_w';
}

// 3dtiles渲染示例相关
const show3dTiles = ref(false)
const onReady = ({ cesiumObject: tileset, viewer })=> {
    const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
    const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)
    const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0)
    const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
    viewer.zoomTo(tileset)
}
const onClicked = (e)=> {
    console.log(e)
}
const allTilesLoaded = (e)=> {
    console.log('allTilesLoaded')
}
const showOrHidden = (val) => { 
    if (!val) { 
        document.getElementsByClassName('vc-zoom-reset')[0].click();
    }
}
// 标绘工具相关
const mainFabOpts = {
    direction: 'right',
    modelValue:false
}
let restoreCursorMove = ref('auto')
let drawing = ref(false)
const drawingsReadyDefault = ({ Cesium, viewer, cesiumObject })=> {
    console.log('绘制选项参数：', cesiumObject)
}
const drawEvt = (e, viewer)=> {
    const restoreCursor = getComputedStyle(viewer.canvas).cursor
    if (e.finished) {
        if (e.type === 'move') {
            viewer.canvas.setAttribute('style', `cursor: ${restoreCursorMove}`)
        }
        drawing = false
    } else {
        drawing = true
        if (e.type === 'move') {
            viewer.canvas.setAttribute('style', 'cursor: move')
        }
        if (e.type === 'new') {
            viewer.canvas.setAttribute('style', 'cursor: crosshair')
        }
    }
}
const activeEvt = (e, viewer)=> {
    console.log(e)
    viewer.canvas.setAttribute('style', `cursor: ${e.isActive ? 'crosshair' : 'auto'}`)
    if (!e.isActive) {
        drawing = false
        restoreCursorMove = 'auto'
    }
}
const editorEvt = (e, viewer)=> {
    if (e.type === 'move') {
        viewer.canvas.setAttribute('style', 'cursor: move')
        drawing = true
    } else {
        viewer.canvas.setAttribute('style', 'cursor: auto')
    }
}
const mouseEvt = (e, viewer)=> {
    const restoreCursor = getComputedStyle(viewer.canvas).cursor
    if (!drawing) {
        console.log(e)
        if (e.type === 'onmouseover') {
            restoreCursorMove = restoreCursor
            viewer.canvas.setAttribute('style', 'cursor: pointer')
        } else {
            viewer.canvas.setAttribute('style', `cursor: ${restoreCursorMove || 'auto'}`)
        }
    }
}
const clearEvt = (e, viewer)=> {
    console.log(e)
}

//测量工具相关
const measureFabOpts = {
    direction: 'right',
    modelValue: false
}
const measurementsReady = ({ Cesium, viewer, cesiumObject }) => {
    console.log('绘制选项参数：', cesiumObject)
}

//分析工具相关
const analyseFabOpts = {
    direction: 'right',
    modelValue: false
}
const analysesReady = ({ Cesium, viewer, cesiumObject })=> {
    console.log('分析选项参数：', cesiumObject)
}
const analyseDrawEvt = (e, viewer) => {
    const restoreCursor = getComputedStyle(viewer.canvas).cursor
    if (e.finished) {
        if (e.type === 'move') {
            viewer.canvas.setAttribute('style', `cursor: ${restoreCursorMove}`)
        }
        drawing = false
    } else {
        drawing = true
        if (e.type === 'move') {
            viewer.canvas.setAttribute('style', 'cursor: move')
        }
        if (e.type === 'new') {
            viewer.canvas.setAttribute('style', 'cursor: crosshair')
        }
    }
}
const analyseActiveEvt = (e, viewer) => {
    console.log(e)
    viewer.canvas.setAttribute('style', `cursor: ${e.isActive ? 'crosshair' : 'auto'}`)
    if (!e.isActive) {
        drawing = false
        restoreCursorMove = 'auto'
    }
}

onMounted(() => {
    console.log(`the component is now mounted.`)
})
 
onBeforeUnmount(() => {
    console.log(`the component is now beforeUnmount.`)
})
</script>

<style scoped lang="scss">
.cvdCls{
    width: 100%;
    height: 820px;
}
.toolsDiv{
    position: absolute;
    left: 250px;
    top: 100px;
    width: 300px;
    background: rgb(233, 238, 243,0.85);
    padding: 20px;
}
</style>